[data-theme="light"] {
  --fo-a: 21.6 100% 50%;

  --fo-vibrancy-background: theme(colors.native.active);
  --fo-vibrancy-foreground: 0 0% 45%;

  --fo-text-primary: 0 0% 10%;

  --fo-item-active: theme(colors.zinc.400/0.3);
  --fo-item-hover: theme(colors.zinc.400/0.2);

  --fo-inactive: 0 0% 80%;
  --fo-disabled: 0 0% 70%;

  --fo-background: theme(colors.background);

  --fo-modal-background: theme(colors.zinc.50/0.8);
  --fo-modal-background-opaque: theme(colors.zinc.50);

  --fo-text-primary-hover: 0 0% 14.9%;

  --fo-button-hover: theme(colors.zinc.500/0.1);
}

[data-theme="dark"] {
  --fo-a: 21.6 100% 50%;

  --fo-vibrancy-foreground: 0 0% 83%;
  --fo-vibrancy-background: theme(colors.native.active);

  --fo-text-primary: 0 0% 80%;

  --fo-item-active: theme(colors.neutral.600/0.4);
  --fo-item-hover: theme(colors.neutral.700/0.3);

  --fo-inactive: 0 0% 50%;
  --fo-disabled: 0 0% 35%;

  --fo-background: theme(colors.background);

  --fo-modal-background: theme(colors.neutral.900/0.8);
  --fo-modal-background-opaque: theme(colors.neutral.900);

  --fo-text-primary-hover: 240 4.9% 83.9%;

  --fo-button-hover: theme(colors.neutral.400/0.15);
}

[data-theme="light"] {
  --fo-native: 240 1.6% 87.6%;
  --fo-native-active: 240 0.9% 78.2%;
}
[data-theme="dark"] {
  --fo-native: 30 1.7% 23.5%;
  --fo-native-active: 20 2.1% 28.4%;
}

[data-build-type="web"] {
  --fo-native: 240 4.8% 95.9%;
  --fo-native-active: 240 4.9% 83.9%;
}

[data-build-type="web"][data-theme="dark"] {
  --fo-native: 220 8.1% 14.5%;
  --fo-native-active: 198 31.3% 6.3%;
}
